<template>
	<page-layout avatar="https://cdn.zhoukaiwen.com/logo.png">
		<div slot="headerContent">
			<div class="title">周凯文</div>
			<div>www.zhoukaiwen.com</div>
		</div>
		<template slot="extra">
			<head-info class="split-right" :title="$t('project')" content="33" />
			<head-info class="split-right" :title="$t('ranking')" content="6/24" />
			<head-info class="split-right" :title="$t('visit')" content="6,723" />
		</template>
		<template>
			<a-row style="margin: 0 -12px">
				<a-col style="padding: 0 12px" :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
					<a-card :title="$t('access')" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
						<div class="item-group">
							<a>个人主页</a>
							<a>个人简历</a>
							<a href="https://gitee.com/kevin_chou" target="_blank">Git主页</a>
							<a>敬请期待...</a>
							<!-- <a-button size="small" type="primary" ghost icon="plus">{{$t('add')}}</a-button> -->
						</div>
					</a-card>
					
					<a-card class="project-list" :loading="loading" style="margin-bottom: 24px;" :bordered="false" :title="$t('progress')"
					:body-style="{padding: 0}">
						<a slot="extra">{{$t('all')}}</a>
						<div>
							<a-card-grid :key="i" v-for="(item, i) in projects">
								<a-card :bordered="false" :body-style="{padding: 0}">
									<a-card-meta :description="item.content">
										<div slot="title" class="card-title">
											<a-avatar size="small" :src="item.img" />
											<span>{{item.title}}</span>
										</div>
									</a-card-meta>
									<div class="project-item">
										<a class="group" href="JavaScript:;">{{item.type}}</a>
										<span class="datetime" v-html="item.other"></span>
									</div>
								</a-card>
							</a-card-grid>
						</div>
					</a-card>
				</a-col>
				<a-col style="padding: 0 12px" :xl="8" :lg="24" :md="24" :sm="24" :xs="24">
					
					<a-card :loading="loading" title="常用技术栈" style="margin-bottom: 24px" :bordered="false">
						<div class="members">
							<a-row>
								<a-col :span="12" v-for="(item, index) in skill" :key="index">
									<a>
										<a-avatar size="small" :src="item.avatar" />
										<span class="member">{{item.name}}</span>
									</a>
								</a-col>
							</a-row>
						</div>
					</a-card>
					<a-card :loading="loading" title="什么板块呢？" :bordered="false">
						<div class="members">
							emmm... 还没想好要做什么
						</div>
					</a-card>
				</a-col>
			</a-row>
		</template>
	</page-layout>
</template>

<script>
	import PageLayout from '@/layouts/PageLayout'
	import HeadInfo from '@/components/tool/HeadInfo'
	import {
		mapState
	} from 'vuex'
	import {
		request,
		METHOD
	} from '@/utils/request'

	export default {
		name: 'WorkPlace',
		components: {
			HeadInfo,
			PageLayout
		},
		i18n: require('./i18n'),
		data() {
			return {
				projects: [{
						img: require('@/assets/img/logo2.png'),
						title: '前端铺子-移动端uniapp',
						type: 'App/小程序',
						content: '项目基于VUE，使用colorUi与uview框架，完美支持微信小程序，功能：自定义TabBar/顶部、地图轨迹回放、电子签名、自定义相机、拍照图片水印、在线答题、证件识别、周边定位查询、文档预览、各种图表、行政区域、海报生成器、视频播放、主题切换、时间轴、瀑布流、排行榜、渐变动画、加载动画、请求封装等',
						other: '<a href="https://gitee.com/kevin_chou/qdpz" target="_blank"><img style="width: 110px;position: absolute;right: 0;" src="https://svg.hamm.cn/gitee.svg?type=star&user=kevin_chou&project=qdpz" /></a>'
					},
					{
						img: require('@/assets/img/logo2.png'),
						title: '前端铺子-说明文档',
						type: 'H5/PC端',
						content: '「前端铺子·文档」 使用vue3.0 + TS，采用 Vitepress 开发，支持主题切换，代码简洁。如发现文档有误，欢迎提 pr 帮助改进',
						other: '<a href="https://gitee.com/kevin_chou/qdpz-docs" target="_blank"><img style="width: 110px;position: absolute;right: 0;" src="https://svg.hamm.cn/gitee.svg?type=star&user=kevin_chou&project=qdpz-docs" /></a>'
					},
					{
						img: require('@/assets/img/logo/dataV.png'),
						title: '数据可视化大屏集合',
						type: 'PC端',
						content: '可视化数据电子大屏集合，包含行业：金融行业、智慧社区、智慧物业、智慧政务、智慧交通、通用模板等，包含功能：自定义字体、Css动画、K线、折线等、WebSocket实时数据、各种图表，iframe嵌套H5/App，替换js数据即可，满足您会议展览、业务监控、风险预警、地理信息、数据分析/展示等多种业务的展示需求',
						other: '<a href="https://gitee.com/kevin_chou/dataVIS" target="_blank"><img style="width: 110px;position: absolute;right: 0;" src="https://svg.hamm.cn/gitee.svg?type=star&user=kevin_chou&project=dataVIS" /></a>'
					},
					{
						img: require('@/assets/img/logo/yk_logo.jpeg'),
						title: '易凯商城 - H5端',
						type: 'H5端',
						content: '纯前端H5版本商城，页面清晰易上手、部署简单、H5灵活可广泛应用（可App嵌套/微信公众号/H5端），包含：商品展示、商品分类、分销（暂时移除）购物车、地址管理、售后管理、投诉建议、个人中心等页面',
						other: '<a href="https://gitee.com/kevin_chou/ykShop" target="_blank"><img style="width: 110px;position: absolute;right: 0;" src="https://svg.hamm.cn/gitee.svg?type=star&user=kevin_chou&project=ykShop" /></a>'
					},
					{
						img: require('@/assets/img/logo/koalaBillLogo.jpg'),
						title: '考拉记账 - 热门应用',
						type: '多端打包',
						content: '项目基于uniap开发，完美支持小程序，微信小程序使用人数2k+，一款效率类·记账软件，UI设计精美、操作流畅、代码精简清晰，适合学习。开源项目为基础版，仅供学习使用',
						other: '<a href="https://gitee.com/kevin_chou/koala" target="_blank"><img style="width: 110px;position: absolute;right: 0;" src="https://svg.hamm.cn/gitee.svg?type=star&user=kevin_chou&project=koala" /></a>'
					},
					{
						img: require('@/assets/img/logo/pc.png'),
						title: '小鼎财经科技官网',
						type: 'PC端',
						content: '公司立足于外汇交易的大数据研究，结合自动交易软件的实现，来规避人工操作的失误和时间精力成本，基于数据分析的结果，分析团队制定量化模型，开发智能交易系统',
						other: '<a href="https://zhoukaiwen.com/proj/pcWebsite/dingang/index.html" target="_blank">体验预览</a>'
					},
					{
						img: require('@/assets/img/logo/pc.png'),
						title: '医疗器械官网(印度)',
						type: 'PC/H5端',
						content: '商业类型项目，所属行业为医疗器械，客户群体为印度企业/居民，官网展示医疗器械、商品购买、公司简介、商品简介、注册登陆等',
						other: '<a href="https://zhoukaiwen.com/proj/outs_medical/index.html" target="_blank">体验预览</a>'
					},
					{
						img: require('@/assets/img/logo/pc.png'),
						title: '「51泊车」产品网站',
						type: 'PC端',
						content: '入职锦途停车时，为公司制作的官方网站，"51泊车"该网站立足于服务乘用车车主、停车场业主、搜索汽车服务市场。让车主"出行不闹心，停车不担心"',
						other: '<a href="https://zhoukaiwen.com/proj/pcWebsite/51car/index.html" target="_blank">体验预览</a>'
					},
					{
						img: require('@/assets/img/logo/pc.png'),
						title: '锦途停车服务官网',
						type: 'PC端',
						content: '锦途停车是一家专业的“互联网+城市服务”的倡导者，是智慧城市的领跑者，为人们提供便捷智能的生活服务是我们的愿景，致力于“创造更多幸福感，让生活更多欢笑”',
						other: '<a href="https://zhoukaiwen.com/proj/pcWebsite/jintu2/index.html" target="_blank">体验预览</a>'
					},
					{
						img: require('@/assets/img/logo/pc.png'),
						title: '微信答题H5页',
						type: 'H5端',
						content: '入职锦途停车时，为人事部门制作的一款发布招聘信息前，对技术人员的在线答题筛选的H5页面，初步筛选入职的技术人员。',
						other: '<a href="https://zhoukaiwen.com/proj/H5_answer/index.html" target="_blank">体验预览</a>'
					}
				],
				loading: true,
				skill: [
					{
						avatar: require('@/assets/img/skill/html.jpeg'),
						name: 'HTML'
					},
					{
						avatar: require('@/assets/img/skill/JavaScript.jpeg'),
						name: 'JavaScript'
					},
					{
						avatar: require('@/assets/img/skill/vue.jpeg'),
						name: 'Vue'
					},
					{
						avatar: require('@/assets/img/skill/react.png'),
						name: 'React'
					},
					{
						avatar: require('@/assets/img/skill/node.jpeg'),
						name: 'Node.js'
					},
					{
						avatar: require('@/assets/img/skill/jquery.jpeg'),
						name: 'jQuery'
					},
					{
						avatar: require('@/assets/img/skill/bootstrap.png'),
						name: 'Bootstrap'
					},
					{
						avatar: require('@/assets/img/skill/xiaochengxu.jpeg'),
						name: '小程序'
					},
					{
						avatar: require('@/assets/img/skill/uniapp.png'),
						name: 'UniApp'
					}
				]
			}
		},
		computed: {
			...mapState('account', {
				currUser: 'user'
			}),
			...mapState('setting', ['lang'])
		},
		created() {
			this.loading=false
		}
	}
</script>

<style lang="less">
	@import "index";
	@media screen and (max-width: 1012px) {
		.ant-card-grid {
			width: 100% !important;
		}
	}
</style>
